<template>
	<view class="content">
		<view class="backgroud">
			<view class="avatar">
				<u-avatar :src="src" shape="circle" size=80></u-avatar>
			</view>
			<view class="username">
				<text>{{username}}</text>
			</view>
			<view class="item">
				tel:{{phone}}
			</view>
			<view class="item">
				email:{{email}}
			</view>
			<view class="item">
				{{text}}
			</view>

			<view class="list">
				<view class="item">
					点赞量
					<br>
					1250
				</view>
				<view class="item">
					关注量
					<br>
					200
				</view>
				<view class="item">
					浏览量
					<br>
					1312312
				</view>
			</view>
		</view>
		<view class="secondlist">
			<view class="box">

			</view>
			<view class="title">
				Activities
			</view>
			<view class="items" @click="drawHistory">
				自主画图记录
			</view>
			<view class="items" @click="history">
				课程学习记录
			</view>
			<view class="items" @click="exit">
				退出账号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/5a975b54-2d6c-45c4-a3ac-31ed0e3ec229.jpeg',
				username: '唤雨师',
				phone: "17730661950",
				email: "1174601344@qq.com",
				text: "如果活着不是为了干饭将毫无意义"
			};
		},
		methods: {
			exit() {
				uni.redirectTo({
					url: "../login/login"
				})
			},
			history() {
				uni.navigateTo({
					url: "../history/history"
				})
			},
			drawHistory() {
				uni.navigateTo({
					url: "../drawhistory/drawhistory"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.backgroud {
			background-image: url(../../static/profile/background.png);
			background-repeat: repeat-x;
			background-size: 100% 100%;
			height: 400px;

			.avatar {
				margin-top: 90px;
				display: flex;
				justify-content: center;
			}

			.username {
				text-align: center;
				height: 40px;
				line-height: 40px;
				color: white;
				margin-top: 20px;
				font-size: 23px;
			}

			.item {
				color: white;
				text-align: center;
				margin-top: 10px;
				font-size: 16px;
			}

			.list {

				margin: 10px auto;
				width: 630rpx;
				height: 100px;
				background-color: #fff;
				border-radius: 5px;
				box-shadow: 2px 2px 2px #C0C0C0;
				display: flex;
				align-items: center;

				.item {
					color: black;
					width: 200rpx;
					height: 40px;
					// background-color: red;
					margin: auto;
					text-align: center;
					line-height: 20px;
					padding: 20px 0;
				}
			}


		}

		.backgroud::before {
			content: '';
			display: table;
			clear: both;
		}

		.secondlist {
			.box {
				height: 60px;

			}

			.title {
				height: 30px;
				line-height: 30px;
				font-size: 30px;
				margin-left: 10px;
				margin-bottom: 20px;
			}

			.items {
				height: 40px;
				// line-height: 20px;
				width: 600rpx;
				margin: 20px auto;
				padding: 10px auto;
				// text-align: center;
				font-size: 18px;
				border-bottom: #999999 1px solid;

			}

			.items:hover {
				background-color: #eff;
			}
		}

	}
</style>
